// =======布局---样式---数据逻辑---界面逻辑---事件逻辑============
// ========面向对象：封装，继承，多态=======

/**
 * ==========================================================数据逻辑
 */
// 商品对象
class Goods{
	constructor(goods){
		this.goods = goods;
		this.chooseNum = 0;
	}
	// 增加当前商品
	increse(){
		this.chooseNum++;
	}
	// 减少当前商品
	decrese(){
		if(this.chooseNum <= 0){
			return
		}
		this.chooseNum--
	}
	// 计算当前商品的总价
	getAmountPrice(){
		return this.chooseNum * this.goods.price
	}
}

// 页面数据对象
class UiData{
	constructor(){
		const goodsList = [];
		goods.forEach(val => {
			const goods = new Goods(val);
			goodsList.push(goods)
		})
		this.goodsList = goodsList;
		// 配送费
		this.freight = 5;
		// 起送门槛
		this.freightThreshold = 30;
	}
	// 总价
	getAllPrice(){
		let sumPrice = 0;
		this.goodsList.forEach(val => {
			sumPrice += val.getAmountPrice()
		})
		return sumPrice.toFixed(2);
	}
	// 选择的商品总数量
	getAllChoosedNum(){
		let sumNum = 0;
		this.goodsList.forEach(val =>{
			sumNum += val.chooseNum;
		})
		return sumNum;
	}
	// 离起送门槛的金额
	getFreightThreshold(){
		return (this.freightThreshold - this.getAllPrice()).toFixed(0);
	}
	// 是否跨国起送门槛
	isOverThreshold(){
		return this.getFreightThreshold() < 0
	}
	// 增加某个商品的数量
	increse(index){
		this.goodsList[index].increse();
	}
	// 减少某个商品的数量
	decrese(index){
		this.goodsList[index].decrese()
	}
}


/**
 * ==========================================================界面逻辑
 */
class UI{
	constructor(){
		this.uiData = new UiData();
		this.doms = {
			goodsList:document.querySelector(".goods-list"),
			footerCar:document.querySelector(".footer-car"),
			footerPay:document.querySelector(".footer-pay"),
			carTotal:document.querySelector(".footer-car-total"),
			carTip:document.querySelector(".footer-car-tip"),
			numBox:document.querySelector(".footer-car-badge"),
		}
		// 加入购物车动画结束坐标
		const rect = this.doms.footerCar.getBoundingClientRect()
		this.endPoint = {
			x:rect.left + rect.width / 2,
			y:rect.top + rect.height / 2,
		}
		
		this.initPage()
		this.setListenEvent()
	}
	// 设置全局监听
	setListenEvent(){
		this.doms.footerCar.addEventListener("animationend",function(){
			this.classList.remove('animate')
		})
	}
	
	
	// 初始化界面
	initPage(){
		let html = "";
		this.uiData.goodsList.forEach((val,index) => {
			const goods = val.goods;
			html += `<div class="goods-item">
			  <img src="${goods.pic}" alt="" class="goods-pic" />
			  <div class="goods-info">
				<h2 class="goods-title">${goods.title}</h2>
				<p class="goods-desc">${goods.desc}</p>
				<p class="goods-sell">
				  <span>月售 ${goods.sellNumber}</span>
				  <span>好评率${goods.favorRate}%</span>
				</p>
				<div class="goods-confirm">
				  <p class="goods-price">
					<span class="goods-price-unit">￥</span>
					<span>${goods.price}</span>
				  </p>
				  <div class="goods-btns">
					<i index="${index}" class="iconfont i-jianhao"></i>
					<span>${val.chooseNum}</span>
					<i index="${index}" class="iconfont i-jiajianzujianjiahao"></i>
				  </div>
				</div>
			  </div>
			</div>`
			this.doms.goodsList.innerHTML = html;
		})
	}
	// 设置全局监听
	
	// 更新商品模块的页面状态
	refreshGoodsItem(index){
		const itemDom = this.doms.goodsList.children[index]
		if(this.uiData.goodsList[index].chooseNum > 0){
			itemDom.classList.add('active')
		}else{
			itemDom.classList.remove('active')
		}
		const spanDom = itemDom.querySelector(".goods-btns span")
		spanDom.textContent = this.uiData.goodsList[index].chooseNum;
	}
	// 更新页脚的页面状态
	refreshFooter(){
		if(this.uiData.getAllChoosedNum() > 0){
			this.doms.footerCar.classList.add('active')
		}else{
			this.doms.footerCar.classList.remove('active')
		}
		
		if(this.uiData.isOverThreshold()){
			this.doms.footerPay.classList.add('active')
		}else{
			this.doms.footerPay.classList.remove('active')
		}
		// 总价
		this.doms.carTotal.textContent = this.uiData.getAllPrice()
		// 配送费
		this.doms.carTip.textContent = `配送费：￥${this.uiData.freight}`;
		// 门槛金额
		const span = this.doms.footerPay.querySelector('span')
		span.textContent = `还差￥${this.uiData.getFreightThreshold()}元起送`
		// 所选商品总数
		this.doms.numBox.textContent = this.uiData.getAllChoosedNum()
	}
	// 增加某个商品的数量
	increse(index){
		this.uiData.increse(index)
		this.refreshGoodsItem(index)
		this.refreshFooter();
		this.addIconJump(index)
	}
	// 减少某个商品的数量
	decrese(index){
		this.uiData.decrese(index)
		this.refreshGoodsItem(index)
		this.refreshFooter()
	}
	// 购物车动画
	carAnimate(){
		this.doms.footerCar.classList.add('animate')
	}
	
	// 添加商品时，加号图标动画
	addIconJump(index){
		// 创建jump的对象
		const div = document.createElement('div')
		div.className = "add-to-car";
		const i = document.createElement('i')
		i.className = 'iconfont i-jiajianzujianjiahao';
		
		// 初始化jump对象的位置
		const itemDom = this.doms.goodsList.children[index];
		const addIcon = itemDom.querySelector('.i-jiajianzujianjiahao');
		// 获取dom元素的所有属性
		const rect = addIcon.getBoundingClientRect();
		// 设置跳跃的起始位置
		const startPoint = {
			x:rect.x + rect.width / 2,
			y:rect.y + rect.height / 2
		}
		div.style.transform = `translateX(${startPoint.x}px)`;
		i.style.transform = `translateY(${startPoint.y}px)`;
		
		// 设置初始位置之后再挂载
		div.appendChild(i);
		document.body.appendChild(div)
		// 强行渲染
		div.clientHeight;
		// 设置跳跃的终点位置
		div.style.transform = `translateX(${this.endPoint.x}px)`;
		i.style.transform = `translateY(${this.endPoint.y}px)`;
		
		// 设置后续动画
		const _that = this;
		div.addEventListener('transitionend',function(){
			div.remove()
			_that.doms.footerCar.classList.add('animate')
		},{
			once:true
		})
	}
}
const ui = new UI();

/**
 * ==========================================================事件逻辑
 */

ui.doms.goodsList.addEventListener('click',function(e){
	// 获取索引，并强转为数字
	const index = +e.target.getAttribute('index')
	if(e.target.classList.contains('i-jiajianzujianjiahao')){
		ui.increse(index)
	}else if(e.target.classList.contains('i-jianhao')){
		ui.decrese(index)
	}
})


